{% extends 'base/base.html' %}

{% block title %}用户仪表盘{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/user.css' %}">
{% endblock %}

{% block sidebar %}
<div class="sidebar-sticky pt-3">
    <ul class="nav flex-column">
        <li class="nav-item">
            <a class="nav-link active" href="{% url 'accounts:user_dashboard' %}">
                <i class="fas fa-tachometer-alt me-2"></i>仪表盘
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{% url 'accounts:spot_list' %}">
                <i class="fas fa-map-marked-alt me-2"></i>浏览景点
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="fas fa-heart me-2"></i>我的收藏
            </a>
        </li>
    </ul>
</div>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">用户仪表盘</h1>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-header">
                <h5>欢迎回来, {{ request.user.username }}</h5>
            </div>
            <div class="card-body">
                <p>您已收藏 {{ favorite_spots|length }} 个景点</p>
                <a href="{% url 'accounts:spot_list' %}" class="btn btn-primary">浏览更多景点</a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h5>快捷操作</h5>
            </div>
            <div class="card-body">
                <a href="#" class="btn btn-outline-secondary btn-sm mb-2 d-block">修改资料</a>
                <a href="#" class="btn btn-outline-secondary btn-sm mb-2 d-block">修改密码</a>
                <a href="{% url 'logout' %}" class="btn btn-outline-danger btn-sm d-block">退出登录</a>
            </div>
        </div>
    </div>
</div>

{% if favorite_spots %}
<div class="card mt-4">
    <div class="card-header">
        <h5>我的收藏</h5>
    </div>
    <div class="card-body">
        <div class="row">
            {% for spot in favorite_spots %}
            <div class="col-md-4 mb-3">
                <div class="card h-100">
                    {% if spot.cover_image %}
                    <img src="{{ spot.cover_image.url }}" class="card-img-top" alt="{{ spot.name }}" style="height: 150px; object-fit: cover;">
                    {% endif %}
                    <div class="card-body">
                        <h5 class="card-title">{{ spot.name }}</h5>
                        <p class="card-text text-muted small">{{ spot.description|truncatechars:50 }}</p>
                    </div>
                    <div class="card-footer bg-transparent">
                        <a href="{% url 'accounts:spot_detail' spot.id %}" class="btn btn-sm btn-outline-primary">查看详情</a>
                        <a href="{% url 'accounts:toggle_favorite' spot.id %}" class="btn btn-sm btn-outline-danger float-end">
                            <i class="fas fa-heart"></i>
                        </a>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/user.js' %}"></script>
{% endblock %}